<template>
	<view class="content">
		<!-- F1:手机系统状态栏的设定 -->
		<view class="status-bar" :style="{height:statusBarHeight+'px'}">
		</view>
		<!-- F2:logo图片 -->
		<!-- 默认image组件，图片的尺寸320*240 -->
		<!-- mode="widthFix" 让宽度变化后，高度等比例缩放 -->
		<image src="/static/img/logo.png" mode="widthFix" class="logo" />
		<!-- F3 手机输入框 -->
		<view class="input-group ">
			<input placeholder="请输入手机号码" class="input" v-model="phone" />
			<uni-icons color="#090" type="phone-filled" size="30" class="icon left"></uni-icons>
			<uni-icons color="#1296DB" type="clear" size="30" class="icon right" @click="clear"></uni-icons>
		</view>
		<!-- F4 密码输入框 -->
		<view class="input-group pwd-group ">
			<input placeholder="请输入密码" class="input" v-model="pwd" :type="passwordVisible ? 'text' : 'password'" />
			<uni-icons color="#090" type="locked-filled" size="30" class="icon left"></uni-icons>
			<uni-icons color="#8A8A8A" :type="passwordVisible ? 'eye' : 'eye-slash'" size="30" class="icon right"
				@click="togglePasswordVisibility"></uni-icons>
		</view>
		<!-- F5 登录按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- F6 忘记密码 -->
		<!-- open-type=navgate 打开新的页面，把当前页面保存历史栈 -->
		<!-- open-type=switchTab 切换页签跳转 如果历史栈中没有会放到历史栈 -->
		<!-- open-type=redirect 销毁跳转 -->
		<!-- open-type=relaunch 重启跳转，销毁所有页面 -->
		<text class="find" @click="jump">忘记密码</text>
	</view>
</template>

<script>
	import {
		userLogin
	} from '../../service'

	export default {
		data() {
			return {
				passwordVisible: false,
				statusBarHeight: 0,
				phone: '',
				pwd: ''
			}
		},
		// 生命周期函数，当页面挂载完毕，类似于mounted
		onLoad() {
			// 获取系统信息
			// 获取状态栏高度
			const {
				statusBarHeight
			} = uni.getSystemInfoSync()
			// 把获取的状态栏高度保存到数据
			this.statusBarHeight = statusBarHeight
		},
		methods: {
			clear() {
				this.phone = ''
			},
			togglePasswordVisibility() {
				this.passwordVisible = !this.passwordVisible;
			},
			jump() {
				//导航跳转
				uni.navigateTo({
					url: '/pages/feeList/feeList'
				})
			},
			async doLogin() {
				// console.log(this.phone, this.pwd)
				//验证手机号码格式是否正确
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					//吐司对话框
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none',
						duration: 3000,
					})
					return
					//模态框
					// uni.showModal({
					// 	title: '手机格式错误',
					// 	content: 'xxx',
					// 	success: function(res) {
					// 		//判断是点击还是取消
					// 		if (res.confirm) {
					// 			console.log('用户点击确认')
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消')
					// 		}

					// 	}
					// })
				}
				//验证密码不能小于6位
				if (this.pwd.length < 6) {
					uni.showToast({
						title: '密码格式错误',
						icon: 'none',
						duration: 3000,
					})
					return
				}
				//发送请求
				const data = await userLogin(this.phone, this.pwd)
				console.log(data);
				//判断是否成功
				if (data.code === 2000) {
					//将服务器端响应的token存储
					uni.setStorageSync('userToken', data.token)
					console.log(uni.getStorageSync('userToken'));
					//跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showModal({
						title: '登录失败',
						content: '错误原因：' + data.msg
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 页面的背景颜色
	page {
		background-color: $uni-bg-color;
	}

	// 状态栏
	.status-bar {
		width: 750rpx;
		background-color: $zh-theme-color;
		// 禁止状态栏占位
		position: fixed;
	}

	// logo
	.logo {
		width: 450rpx;
		margin: $uni-spacing-col-lg*8 auto 0;
	}

	// 输入框组
	.input-group {
		background-color: $zh-theme-grey-lighter;
		margin: $uni-spacing-col-lg*3 $uni-spacing-row-lg 0;
		border-radius: $uni-border-radius-lg;
		position: relative;

		&.pwd-group {
			margin-top: $uni-spacing-col-lg ;
		}

		.input {
			width: 100%;
			height: $uni-font-size-lg*3;
			font-size: $uni-font-size-base;
			padding: 0 $uni-spacing-row-lg*2.5;
		}

		.icon {
			position: absolute;
			top: $uni-font-size-base/1.6;

			&.left {
				left: $uni-spacing-row-sm;
				;
			}

			&.right {
				right: $uni-spacing-row-sm;
			}
		}
	}

	//忘记密码
	.find {
		text-align: center;
		font-size: $uni-font-size-base;
		margin-top: $uni-spacing-col-lg;
	}

	// 登录
	.btn {
		margin: $uni-spacing-col-lg*1.5 $uni-spacing-row-lg 0;
		background-color: $zh-theme-color;
		color: #ffffff;
		font-size: $uni-font-size-base;

		&:active {
			//scss函数
			// darken(颜色值,百分比) 返回一个更深的颜色
			// lighten(颜色值,百分比) 返回一个更浅的颜色
			background-color: darken($zh-theme-color, 5%);

		}
	}
</style>